﻿<template>
    <div class="ad-content">
        <div class="ad-main">
            <div class="ad-console-top">
                <div class="ad-console-top-name">单位绑定</div>
                <div class="ad-console-top-body"></div>
                <div class="ad-console-top-end"></div>
            </div>
            <div class="ad-console-body">
                <div class="ad-console-toolbar">
                    <el-button type="primary" size="mini" icon="icon-cog4 el-icon--left" @click="openDialog()">绑定</el-button>
                    <div style="float:right">
                        <el-checkbox v-model="unbind" @change="chkchange">未绑定</el-checkbox>&nbsp;
                        <el-input v-model="searchkey" prefix-icon="el-icon-search" placeholder="单位名称" @keyup.enter.native="search()" style="width:180px;" size="mini"></el-input>
                        <el-button type="primary" size="mini" @click="search()" style="padding: 7px 10px;">搜索</el-button>
                    </div>
                </div>
                <el-card class="box-card">
                    <el-table ref="tbl" size="mini" :data="plist" border style="width: 100%" @select="handleSelect">
                        <el-table-column type="index" width="55" label="序号" align="center"></el-table-column>
                        <el-table-column type="selection" width="50" align="center"></el-table-column>
                        <el-table-column prop="Dept" label="任务单位" width="250" align="left"></el-table-column>
                        <el-table-column prop="Name" label="浙政钉单位" align="left">
                            <template slot-scope="scope">
                                <div style="color: red" v-if="scope.row.Name==''">未绑定</div>
                                <div v-else>{{scope.row.Name}}</div>
                            </template>
                        </el-table-column>
                    </el-table>
                    <br />
                    <div style="text-align:center"><el-pagination v-if="count>0" background layout="total, prev, pager, next" :current-page="currentpage" :total="count" @current-change="pagerclick"></el-pagination></div>
                </el-card>
            </div>
            <el-dialog title="选择浙政钉单位" class="dialog dlg" v-dialogDrag :visible="showDialog" width="450px" @close="closeDialog()">
                <el-form :model="form" ref="form" label-width="85px">
                    <el-form-item label-width="0px" style="margin-bottom:10px;">
                        <el-col :span="24">
                            <el-input v-model="key" prefix-icon="el-icon-search" placeholder="单位名称" @keyup.enter.native="find()" style="width:390px;" size="mini"></el-input>
                            <div style="height:400px;overflow:auto" class="demo-block">
                                <el-tree ref="tree" node-key="ID" show-checkbox :props="props" check-strictly :default-checked-keys="keys" :load="treeload" @check="checkNode" lazy v-if="ShowTree">
                                </el-tree>
                            </div>
                        </el-col>
                    </el-form-item>
                    <el-button type="primary" size="medium" @click="setDept">提交</el-button>
                    <el-button size="medium" @click="closeDialog()">关闭</el-button>
                </el-form>
            </el-dialog>
        </div>
    </div>
</template>
<script>
    export default {
        data() {
            return {
                UnitID: '',
                Unit: null,
                count: 0,
                currentpage: 0,
                unbind: false,
                ShowTree: true,
                showDialog: false,
                keys: [],
                plist: [],
                props: {
                    label: 'label',
                    isLeaf: 'isLeaf'
                },
                key: '',
                searchkey:''
            }
        },
        mounted() {
            App.Page.init(this);
            this.load();
        },
        methods: {
            treeload(node, resolve) {
                this.resolve = resolve;
                if (node == null || !node.data) {
                    App.Service.post("/plus/Yqd/Department/GetDeptList", { key: this.key }).then((res) => {
                        if (res.success) {
                            resolve(res.data);
                            this.ShowTree = true;
                        }
                    });
                }
            },
            find() {
                this.ShowTree = false;
                this.treeload(null, this.resolve);
            },
            chkchange() {
                this.currentpage = 0;
                this.load();
            },
            load() {
                App.Service.post("/plus/Yqd/Department/GetUnitList", {
                    start: App.Fn.toStart(this.currentpage),
                    limit: App.pagesize,
                    unbind: this.unbind,
                    key: this.searchkey
                }).then((res) => {
                    if (res.success) {
                        this.count = res.totalcount;
                        this.plist = res.data;
                    }
                });
            },
            pagerclick(currentpage) {
                this.currentpage = currentpage;
                this.load();
            },
            openDialog() {
                if (this.Unit == null) return;
                this.UnitID = this.Unit.OrganizationCode;
                this.keys = [this.UnitID];
                this.showDialog = true;
            },
            closeDialog() {
                this.showDialog = false;
            },
            checkNode: function (a, b) {
                if (b.checkedKeys.length > 0) {
                    this.UnitID = a.ID;
                    this.$refs.tree.setCheckedKeys([a.ID]);
                }
            },
            handleSelect(selection, row) {
                this.$refs.tbl.clearSelection();
                if (selection.length == 0) {
                    this.Unit = null;
                    return;
                }
                if (row) {
                    this.Unit = row;
                    this.$refs.tbl.toggleRowSelection(row, true);
                }
            },
            setDept() {
                if (this.Unit == null) return;
                if (this.UnitID == '') {
                    App.Msg.error('请选择浙政钉单位！');
                    return;
                }
                App.Service.post("/plus/Yqd/Department/SetRelation", {
                    UnitID: this.Unit.ID,
                    OrgCode: this.UnitID
                }).then((res) => {
                    if (res.success) {
                        this.Unit = null;
                        this.UnitID = '';
                        this.closeDialog();
                        this.load();
                    }
                });
            },
            search() {
                this.currentpage = 0;
                this.load();
            }
        }
    };
</script>
